<!--
 * @FilePath: Index.vue
 * @Author: jack
 * @Date: 2025-02-25 16:23:26
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-07-31 14:26:22
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion:
-->
<template>
    <div class="user-info-box">
        <LayerFlex title="首页配置">
            <template v-slot:listBox>
                <div v-for="(item, index) in typeList" class="view-flex-box" :key="index" @click.stop.native="toCheckjsdfds(item, index)"
                    :class="currentType == item.type ? 'active' : ''">
                    {{ item.m_name }}
                </div>
            </template>
            <template v-slot:content>
                <div class="contentBox">
                    <div class="leftBox" ref="childiframeRef">
                        <iframe :src="`/SchoolWeb/?isPreview=1`"
                            :style="{ transform: `translate(-50%, -50%) scale(${iframeScaleWid})`, height: `${1080 / store.zoom}Px!important`, width: `${1440 / store.zoom}Px!important` }"
                            frameborder="0" ref="iframe" id="iframe">
                        </iframe>
                    </div>
                    <div class="rightBox">
                        <ChildrenOne v-if="currentType == 'head_nav'" ref="ChildrenOneRef" :infoData="infoData"
                            :id="uuid" :currentType="currentType" :currentIndex="currentIndex" @getConfig="getConfig"
                            @getConfigInfo="getConfigInfo">
                        </ChildrenOne>
                        <ChildrenTwo v-if="currentType == 'banner'" :infoData="infoData" ref="ChildrenTwoRef" :id="uuid"
                            :currentType="currentType" :currentIndex="currentIndex" @getConfig="getConfig"
                            @getConfigInfo="getConfigInfo">
                        </ChildrenTwo>
                        <ChildrenFour v-if="currentType == 'bottom_info'" ref="ChildrenFourRef" :infoData="infoData"
                            :id="uuid" :currentType="currentType" :currentIndex="currentIndex" @getConfig="getConfig"
                            @getConfigInfo="getConfigInfo">
                        </ChildrenFour>
                    </div>
                </div>
            </template>
        </LayerFlex>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, h, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ChildrenOne from './ChildrenOne.vue'
import ChildrenTwo from './ChildrenTwo.vue'
import ChildrenThild from './ChildrenThild.vue'
import ChildrenFour from './ChildrenFour.vue'
import { PiniaStore } from '../../../store'
import { getSitecfgList } from '../../Api/Setting'
const store = PiniaStore()
const currentType = ref<string>('')
const currentIndex = ref<number>(0)
const uuid = ref<string>('')
const typeList = ref<any>([])
const infoData = ref<any>({})
// 获取所有的类目配置
const getConfig = async () => {
    const res: any = await getSitecfgList()
    if (res.code !== 1) return ElMessage.error(res.msg)
    typeList.value = res.data
    if (typeList.value.length > 0) {
        if (!currentType.value) {
            currentType.value = typeList.value[0].type
            infoData.value = typeList.value[0].m_val ? JSON.parse(typeList.value[0].m_val) : ''
            uuid.value = typeList.value[0].uuid
        } else {
            console.log(infoData.value)
            infoData.value = typeList.value[currentIndex.value].m_val ? JSON.parse(typeList.value[currentIndex.value].m_val) : ''
            uuid.value = typeList.value[currentIndex.value].uuid
        }
    }

}
const ChildrenOneRef = ref<any>(null)
const ChildrenTwoRef = ref<any>(null)
const ChildrenThildRef = ref<any>(null)
const ChildrenFourRef = ref<any>(null)
const toCheckjsdfds = async (item: any, index: number) => {
    // 切换模块时候验证上一个是否有改变，有改变就要弹出来二次确认
    let bol = false
    if (currentType.value === 'head_nav') {
        bol = JSON.stringify(ChildrenOneRef.value.editForm) !== JSON.stringify(infoData.value)
    } else if (currentType.value === 'banner') {
        bol = JSON.stringify(ChildrenTwoRef.value.bannerList) !== JSON.stringify(infoData.value)
    } else if (currentType.value === 'digit_school') {
        await ChildrenThildRef.value.resetDate()
        bol = JSON.stringify(ChildrenThildRef.value.editForm.module_name) !== JSON.stringify(infoData.value.module_name) || JSON.stringify(ChildrenThildRef.value.typeList) !== JSON.stringify(infoData.value.typeList)
    } else if (currentType.value === 'bottom_info') {
        bol = JSON.stringify(ChildrenFourRef.value.editForm) !== JSON.stringify(infoData.value)
    }
    if (bol && infoData.value) {
        // 如果有改变
        ElMessageBox({
            title: '温馨提示',
            message: h('p', { style: 'font-weight:bold;font-size: 15px;color: #333333;' }, [
                h('span', null, '确认要切换模块配置吗？'),
                h('p', { style: 'font-size: 14px;font-weight:normal;color: rgba(0,0,0,0.65);margin-top:10px;' }, '确认切换之后配置的相关信息将会丢失，确定要继续吗?'),
            ]),
            showCancelButton: true,
            confirmButtonText: '保存配置',
            cancelButtonText: '确认',
            type: 'warning',
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    // 保存数据
                    if (currentType.value === 'head_nav') {
                        await ChildrenOneRef.value.submitForm(ChildrenOneRef.value.editFormRef)
                    } else if (currentType.value === 'banner') {
                        await ChildrenTwoRef.value.submitForm()
                    } else if (currentType.value === 'digit_school') {
                        await ChildrenThildRef.value.submitForm(ChildrenThildRef.value.editFormRef)
                    } else if (currentType.value === 'bottom_info') {
                        await ChildrenFourRef.value.submitForm(ChildrenFourRef.value.editFormRef)
                    }
                    done()
                } else {
                    // 确认切换
                    await submitCheck(item, index)
                    await getConfigInfo(JSON.stringify(infoData.value))
                    done()
                }
            }
        }).then((action) => {
        }).catch(() => { })
    } else {
        await submitCheck(item, index)
    }

}
const submitCheck = async (item: any, index: number) => {
    currentType.value = item.type
    currentIndex.value = index
    infoData.value = item.m_val ? JSON.parse(item.m_val) : ''
    uuid.value = item.uuid
}
const getConfigInfo = async (item: any) => {
    typeList.value[currentIndex.value].m_val = item
    store.setHomePageData(typeList.value)
}
const childiframeRef = ref<any>(null)
const iframeScaleWid = ref<number>(1) //iframe的缩放比例
const iframe = ref<any>(null)
const randomNum = ref<any>(0)
onMounted(async () => {
    randomNum.value = Math.random().toString(36).substring(7)
    iframeScaleWid.value = childiframeRef.value.clientWidth / 1440 * store.zoom
    iframe.value.contentWindow.location.reload(true)
    await getConfig()
    window.addEventListener("resize", () => {
        iframeScaleWid.value = childiframeRef.value.clientWidth / 1440 * store.zoom
        iframe.value.contentWindow.location.reload(true)
    })
})
</script>
<style lang="scss" scoped>
.user-info-box {
    height: 100%;

    .contentBox {
        display: flex;
        height: 100%;

        .leftBox {
            flex: 1;
            background: #FFFFFF;
            width: 100%;
            height: 100%;
            position: relative;

            iframe {
                // width: 2160Px !important;
                // height: 1620Px !important;
                border: none;
                border-radius: 20px;
                position: absolute;
                top: 50%;
                /* 距离顶部50% */
                left: 50%;
                /* 距离左边50% */
                margin: auto;
                transform-origin: center center;
            }
        }

        .rightBox {
            margin-left: 20px;
            width: 460px;
            background: #FFFFFF;
        }
    }
}
</style>
